<md-tab-group [(selectedIndex)]="activeTab">
  <md-tab id="tasks-header" href="#tasks" label="{{'PS-TAB.TASKS-TAB' | translate}}">
    <div class="page-content">
      <div class="activiti-demo-grid">
        <div class="activiti-demo-grid-item activiti-demo-tasks-menu">
          <div class="activiti-demo-list-buttons">
            <button color="primary" md-raised-button data-automation-id="btn-start-task" class="activiti-demo-list-buttons-start" (click)="navigateStartTask()">
              <md-icon>add</md-icon>
              <span>{{'PS-TAB.START-TASK' | translate}}</span>
            </button>
          </div>
          <adf-accordion>
            <adf-accordion-group [heading]="'Tasks'" [isSelected]="true" [isOpen]="true"
                                 [headingIcon]="'assignment'">
              <adf-filters
                [filterParam]="{name:'MY tasks'}"
                [appId]="appId"
                [hasIcon]="false"
                (filterClick)="onTaskFilterClick($event)"
                (onSuccess)="onSuccessTaskFilterList($event)"
                #activitifilter>
              </adf-filters>
            </adf-accordion-group>
          </adf-accordion>
        </div>
        <div class="activiti-demo-grid-item activiti-demo-tasks-list"
             *ngIf="taskFilter && !isStartTaskMode() && taskListMode">
          <adf-tasklist
            [appId]="taskFilter?.appId"
            [page]="taskPage"
            [size]="taskPagination.maxItems"
            [processDefinitionKey]="taskFilter?.filter?.processDefinitionKey"
            [name]="taskFilter?.filter?.name"
            [assignment]="taskFilter?.filter?.assignment"
            [state]="taskFilter?.filter?.state"
            [sort]="taskFilter?.filter?.sort"
            [data]="dataTasks"
            [landingTaskId]="currentTaskId"
            (rowClick)="onTaskRowClick($event)"
            (onSuccess)="onSuccessTaskList($event)"
            #activititasklist>
          </adf-tasklist>
          <adf-pagination
            (changePageNumber)="onChangePageNumber($event)"
            (changePageSize)="onChangePageSize($event)"
            (nextPage)="onNextPage($event)"
            (prevPage)="onPrevPage($event)"
            [pagination]="taskPagination"
            [supportedPageSizes]="[2, 4, 6, 8, 10, 12]">
          </adf-pagination>
        </div>
        
        <div class="activiti-demo-grid-item activiti-demo-tasks-details" *ngIf="!isStartTaskMode() && !taskListMode"
             [class.mdl-cell--7-col]="taskFilter && !isStartTaskMode()"
             [class.mdl-cell--10-col]="!taskFilter || isStartTaskMode()">
          <button md-mini-fab  (click)="onTaskDetailsClickBack()" ><md-icon>keyboard_backspace</md-icon></button>
          <md-slide-toggle class="align-right" (change)="onTaskDetailsModeChange()">
            <span>{{taskDetailsToggleText}}</span>
          </md-slide-toggle>
          <div *ngIf="!showTaskAuditAndRelatedContent">
             <adf-task-details #activitidetails
                                 [debugMode]="false"
                                 [showHeaderContent]="false"
                                 [taskId]="currentTaskId"
                                 [showChecklist]="false"
                                 [fieldValidators]="fieldValidators"
                                 (formCompleted)="onFormCompleted($event)"
                                 (formContentClicked)="onFormContentClick($event)"
                                 (taskCreated)="onTaskCreated($event)"
                                 (assignTask)="onAssignTask()">
            </adf-task-details>
          </div>
          <hr>
          <div *ngIf="showTaskAuditAndRelatedContent">
            <div *ngIf="currentTaskId">
              {{'PS-TAB.TASK-AUDIT-LOG' | translate}}
              <button
                adf-task-audit
                [task-id]="currentTaskId"
                [download]="true"
                md-icon-button>
                <md-icon>assignment_ind</md-icon>
              </button>
              <hr>
            </div>
            <md-card>
              <md-card-content>
                <adf-task-attachment-list
                  [taskId]="currentTaskId"
                  (attachmentClick)="onFormContentClick($event)">
                </adf-task-attachment-list>
              </md-card-content>
            </md-card>
          </div>
        </div>
        <div class="activiti-demo-grid-item activiti-demo-tasks-start" *ngIf="isStartTaskMode()">
          <adf-start-task
            [appId]="appId"
            (success)="onStartTaskSuccess($event)"
            (cancel)="onCancelStartTask()">
          </adf-start-task>
        </div>
      </div>
    </div>
  </md-tab>

  <md-tab id="processes-header" href="#processes"
          label="{{'PS-TAB.PROCESSES-TAB' | translate}}">
    <div class="page-content">
      <div class="activiti-demo-grid">
        <div class="activiti-demo-grid-item activiti-demo-tasks-menu">
          <div class="activiti-demo-list-buttons">
            <button color="primary"
              md-raised-button
              data-automation-id="btn-start-process"
              class="activiti-demo-list-buttons-start"
              (click)="navigateStartProcess()">
              <md-icon>add</md-icon>
                <span>{{'PS-TAB.START-PROCESS' | translate}}</span><span></span>
            </button>
          </div>
          <adf-accordion>
            <adf-accordion-group [heading]="'Processes'" [isSelected]="true" [isOpen]="true"
                                 [headingIcon]="'assessment'">
              <adf-process-instance-filters
                [filterParam]="{index: 0}"
                [appId]="appId"
                (filterClick)="onProcessFilterClick($event)"
                (onSuccess)="onSuccessProcessFilterList($event)">
              </adf-process-instance-filters>
            </adf-accordion-group>
          </adf-accordion>
        </div>
        <div class="activiti-demo-grid-item activiti-demo-tasks-list"
             *ngIf="processFilter && !isStartProcessMode() && !isDiagramMode">
          <adf-process-instance-list
            *ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId"
            [processDefinitionKey]="processFilter.filter.processDefinitionKey"
            [name]="processFilter.filter.name"
            [state]="processFilter.filter.state"
            [sort]="processFilter.filter.sort"
            [data]="dataProcesses"
            (rowClick)="onProcessRowClick($event)"
            (onSuccess)="onSuccessProcessList($event)">
          </adf-process-instance-list>
        </div>
        <div class="activiti-demo-grid-item activiti-demo-tasks-details" *ngIf="isDiagramMode">
          <button md-mini-fab  (click)="onClickBack()" ><md-icon>keyboard_backspace</md-icon></button>
          <div *ngIf="currentProcessInstanceId">
            {{'PS-TAB.AUDIT-LOG' | translate}}
            <button adf-process-audit
                    [process-id]="currentProcessInstanceId"
                    [download]="true" md-icon-button
                    [format]="'pdf'"
                    (clicked)="onAuditClick($event)"
                    (error)="onAuditError($event)">
              <md-icon>assignment_ind</md-icon>
            </button>
            <hr>
          </div>
          <adf-diagram [processInstanceId]="currentProcessInstanceId"></adf-diagram>
          <md-card>
            <md-card-content>
              <adf-process-attachment-list
                [processInstanceId]="currentProcessInstanceId"
                (attachmentClick)="onFormContentClick($event)">
              </adf-process-attachment-list>
            </md-card-content>
          </md-card>
        </div>
        <div class="activiti-demo-grid-item activiti-demo-tasks-start"
             *ngIf="isStartProcessMode()">
          <adf-start-process
            [appId]="appId"
            (start)="onStartProcessInstance($event)"
            (cancel)="onCancelProcessInstance()">
          </adf-start-process>
        </div>
      </div>
    </div>
  </md-tab>

</md-tab-group>

<div *ngIf="fileShowed">
  <alfresco-viewer
    [(showViewer)]="fileShowed"
    [blobFile]="content"
    [displayName]="contentName"
    [overlayMode]="true">
  </alfresco-viewer>
</div>
